<template>
  <div class="container">
    <!-- search Bar -->
    <!-- <div class="searchBar">
      <div class="content">
        <input type="text"
               class="search-inp"
               @click="search_focus()"
               disabled>
        <img class="search-icon"
             src="https://h5.ameimeika.com/mp_images/shouye/search@2x.png">
        <span @click="search_focus()"
              class="search-text">搜索</span>
      </div>
    </div> -->
    <!-- search-content -->
    <div class="search-wrap clearfix"
         v-if="tipList.length>0">
      <ul class="search-content">
        <li v-for="(item,k) in tipList"
            :key="k"
            @click="is_choose(item)"
            :class="item.check ? 'search-item search-item-check' : 'search-item'">{{item.name}}</li>
      </ul>
    </div>
    <!-- content-title -->
    <div class="content-title">
      <div @click="choose_type(1)"
           class="content-item content-item-left">
        <span :class="add_choose ? 'content-choose' : 'content-name'">{{title_area}}</span>
        <img v-if="!add_choose"
             src="https://h5.ameimeika.com/mp_images/xia-hui@2x.png"
             class="nav">
        <img v-if="add_choose"
             src="https://h5.ameimeika.com/mp_images/shang-hong@2x.png"
             class="nav nav-down">
      </div>
      <div @click="choose_type(2)"
           class="content-item">
        <span :class="name_choose ? 'name-choose': 'content-name'">{{title_name}}</span>
        <img v-if="!name_choose"
             src="https://h5.ameimeika.com/mp_images/xia-hui@2x.png"
             class="nav">
        <img v-if="name_choose"
             src="https://h5.ameimeika.com/mp_images/shang-hong@2x.png"
             class="nav nav-down">
      </div>
      <div @click="choose_type(3)"
           class="content-item content-item-right">
        <span :class="star_choose ? 'name-choose': 'content-name'">评分</span>
        <img v-if="!star_choose"
             src="https://h5.ameimeika.com/mp_images/xia-hui@2x.png"
             class="nav">
        <img v-if="star_choose"
             src="https://h5.ameimeika.com/mp_images/shang-hong@2x.png"
             class="nav nav-down">
      </div>
    </div>
    <!-- choose-list -->
    <scroll-view v-if="show_list"
                 :scroll-y="true"
                 :style="{'height': '100%'}">
      <div :class="show_list ? 'choose-list isshow-bg' : 'choose-list'"
           @click="close_bg">
        <ul class="list-wrap"
            :class="isHeight?'list-wrap1':''">
          <li class="list-item"
              v-if="add_choose"
              @click="choose_item(item,1)"
              v-for="(item,k) in cityList"
              :key="k">{{item.name}}</li>
          <li class="list-item"
              v-if="name_choose"
              @click="choose_item(item,2)"
              v-for="(item,k) in nameList"
              :key="k">{{item.named}}</li>
          <li class="list-item"
              v-if="star_choose"
              @click="choose_item(item,3)"
              v-for="(item,k) in starList"
              :key="k">{{item.namet}}</li>
        </ul>
        <div class="zhanwei"></div>
      </div>
    </scroll-view>
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%','z-index':9999999999}"
                 @scrolltolower="pullrefresh">
      <doclist :doc_list="docArr"></doclist>
      <div class="zhanwei"></div>
      <div class="nomore"
           v-if="no_more">———<span class="no-text">没有更多了</span>———</div>
    </scroll-view>
    <div v-if="empty&&!show_list"
         class="empty">
      <img src="https://img.ameimeika.com/h5_images/mp_images/mp_3.0/search/nocar.png"
           alt=""
           class="img">
      <div class="p">
        暂无相关内容
      </div>
    </div>
  </div>
</template>   

<script>
import common from "@/assets/js/mmk_common.js";
import doclist from "@/components/search_list/doctor_list";
export default {
  data () {
    return {
      imgUrl: common.image_resource,
      tipList: [],
      docArr: [],
      cityList: [],
      nameList: [],
      starList: [{ id: 1, namet: "从高到底" }, { id: 0, namet: "从低到高" }],
      keyword_ids: "", //关键字
      position_id: 0, //职称id
      province_id: 0, //省份id
      rating_sort: 1,
      title_area: "地区",
      title_name: "职称",
      num: 1,
      isbottom: false,
      add_choose: false,
      name_choose: false,
      star_choose: false,
      show_list: false,
      empty: false,
      no_more: false,
      isHeight: false
    };
  },
  onLoad: function (options) {
    Object.assign(this.$data, this.$options.data());
    wx.setNavigationBarTitle({
      title: "品质医生"
    });
    this.getdata();
    this.getMall();
    this.getchoose();
  },
  components: {
    doclist
  },
  methods: {
    //跳转医生详情
    select_nav (item, index) {
      wx.navigateTo({
        url: `/pages/package_projects/shop_type_detail/main?id=${item.id}&title=${item.name}`
      });
    },
    //选择类型
    choose_type (e) {
      if (e == 1) {
        if (this.name_choose || this.star_choose) {
          this.show_list = true;
          this.name_choose = false;
          this.star_choose = false;
          this.add_choose = true;
        } else {
          this.add_choose = !this.add_choose;
          this.show_list = !this.show_list;
        }
      } else if (e == 2) {
        if (this.add_choose || this.star_choose) {
          this.show_list = true;
          this.name_choose = true;
          this.add_choose = false;
          this.star_choose = false;
        } else {
          this.name_choose = !this.name_choose;
          this.show_list = !this.show_list;
        }
      } else if (e == 3) {
        if (this.add_choose || this.name_choose) {
          // this.show_list = true;
          this.star_choose = true;
          this.name_choose = false;
          this.add_choose = false;
        } else {
          this.star_choose = !this.star_choose;
          if (this.star_choose) {
            this.rating_sort = 1
          } else {
            this.rating_sort = 2
          }
          this.num = 1
          this.getMall();
        }
      }
    },
    //关闭遮罩
    close_bg () {
      this.show_list = false;
      this.add_choose = false;
      this.name_choose = false;
    },
    //选择类型内容
    choose_item (item, index) {
      console.log(item)
      this.docArr = []
      this.isbottom = false;
      this.num = 1;
      console.log(999)
      if (index == 1) {
        this.title_area = item.name;
        this.province_id = item.id;
        console.log(this.province_id)
      } else if (index == 2) {
        this.title_name = item.named;
        this.position_id = item.id;
      } else if (index == 3) {
        // this.rating_sort = item.id;
        // this.isHeight = true
        // console.log(this.rating_sort)
      }
      this.getMall();
      this.show_list = false;
      this.add_choose = false;
      this.name_choose = false;
      this.star_choose = false;
    },
    //选中
    is_choose (item) {
      item.check = !item.check;
      let arr = [];
      this.tipList.forEach(tip => {
        if (tip.check) {
          arr.push(tip.id);
        }
      });
      this.keyword_ids = arr.join(",") //擅长项目
      // this.refresh_list();
      this.docArr = []
      this.getMall();
    },
    getdata () {  //顶部擅长项目
      common.fly_post("api/com.mmk.reservation.api.OpenDoctorProvider/1.0.0/getLabels.html", { is_open: 1 }, response => {
        let res = response.data;
        if (res.code == 0) {
          this.tipList = res.data;
          console.log(this.tipList)
        } else {
          common.mmk_Loading(2, res.message);
        }
      }, 'isJava');
    },
    //医生列表
    getMall () {
      if (this.isbottom) {
        return false;
      }
      var order;
      if (this.rating_sort == 1) {
        order = 'star-desc'
      } else {
        order = 'star-asc'
      }
      common.mmk_Loading(0);
      common.fly_post(
        "/api/com.mmk.reservation.api.OpenDoctorProvider/1.0.0/list.html",
        {
          provinceId: this.province_id,
          positionId: this.position_id,
          order: order,
          labelsIds: this.keyword_ids, //擅长项目
          pageNum: this.num,
          pageSize: 15,
          // rating_sort: this.rating_sort,
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.code == 0) {
            if (!res.data.list) {
              if (this.num == 1) {
                this.empty = true
              }
              return false
            }
            if (res.data.list.length == 0 && this.num == 1) {
              this.docArr = res.data.data;
              this.empty = true
            } else if (res.data.list.length > 0 && this.num == 1) {
              this.docArr = res.data.list;
              this.empty = false
            } else if (res.data.list.length > 0 && this.num > 1) {
              this.docArr.push(...res.data.list);
              this.empty = false
            } else if (res.data.list.length == 0 && this.num > 1) {
              common.mmk_Loading(2, "已经到最底下了");
              this.isbottom = true;
              this.empty = false;
              this.no_more = true;
            }
          }
        }, 'isJava');
    },
    refresh_list () {
      common.fly_post(
        "api/v4_5/doctors/index",
        {
          page: 1,
          pageSize: 15,
          keyword_ids: this.keyword_ids,
          position_id: this.position_id,
          province_id: this.province_id,
          rating_sort: this.rating_sort
        },
        response => {
          let res = response.data;
          if (res.status_code == 0) {
            this.docArr = res.data.data;
            // if (res.data.data.length == 0) {
            //   this.empty = true;
            // } else {
            //   this.empty = false
            // }
          }
        }
      );
    },
    //地址，职称
    getchoose () {
      //请求地区
      common.fly_post("api/v4_5/address/index", { is_open: 1 }, response => {
        let res = response.data;
        if (res.status_code == 0) {
          //   res.data.unshift({ id: 0, name: "全国" });
          this.cityList = res.data;
        } else {
          common.mmk_Loading(2, res.message);
        }
      });
      //请求职称
      common.fly_post("api/v4_5/doctors/positions", "", response => {
        let res = response.data;
        if (res.status_code == 0) {
          this.nameList = res.data;
        } else {
          common.mmk_Loading(2, res.message);
        }
      });
    },
    //搜索框
    search_focus () {
      wx.navigateTo({ url: "/pages/package_main/search_index/main" });
    },
    //上拉加载
    pullrefresh (e) {
      this.num++;
      this.getMall(this.num);
    }
  }
};
</script>

<style scoped lang="less">
.container {
  height: 100%;
  background: #f3f4f6;
  height: 100%;
  /* 搜索框样式 */
  .searchBar {
    background-color: #fff;
    border-top: solid 1px #f3f4f6;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 6px 15px;
    .content {
      position: relative;
      // margin: 8px;
      .search-inp {
        width: 268px;
        height: 32px;
        background: rgba(238, 238, 238, 1);
        border-radius: 16px;
        background-color: #eeeeee;
        padding-left: 35px;
      }
      .search-icon {
        width: 20px;
        height: 20px;
        display: block;
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
      }
      .search-text {
        position: absolute;
        right: 31px;
        top: 20%;
        font-size: 14px;
        color: #333333;
      }
    }
  }
  /*search-wrap*/
  .search-wrap {
    // margin-top: 45px;
    z-index: 999;
    .search-content {
      overflow: hidden;
      width: 92%;
      margin: 6px auto;
      padding-top: 4px;
      .search-item {
        float: left;
        margin: 4px;
        font-size: 14px;
        color: #666666;
        border-radius: 4px;
        background: rgba(255, 255, 255, 1);
        text-align: center;
        padding: 4px 8px;
      }
      .search-item-check {
        color: #ff383e;
        background: #ffe1e2;
      }
    }
  }
  /*content-title*/
  .content-title {
    display: flex;
    background: #fff;
    padding: 10px 25px;
    .content-item {
      flex: 1;
      text-align: center;
      font-size: 14px;
      color: #666666;
      .content-name {
        vertical-align: middle;
      }
      .content-choose,
      .name-choose {
        color: #ff383e;
      }
      .nav {
        width: 7px;
        height: 5px;
        position: relative;
        top: 0;
        left: 8px;
        vertical-align: middle;
      }
      .nav-down {
        top: -2px;
      }
    }
    .content-item-left {
      text-align: left;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
    .content-item-right {
      text-align: right;
    }
  }
  /*choose-list*/
  .choose-list {
    width: 100%;
    background: #fff;
    // padding: 5px 15px;
    padding-bottom: 0;
    position: absolute;
    z-index: 9999;
    height: 100%;
    .list-wrap {
      z-index: 99999;
      background: #fff;
      width: 100%;
      margin: 0 auto;
      overflow: auto;
      height: 360px;
      &.list-wrap1 {
        height: 160px;
      }
      .list-item {
        text-align: center;
        border-bottom: solid 1px #eeeeee;
        padding: 9px 0;
        color: #666666;
        font-size: 14px;
        width: 88%;
        margin: 0 auto;
      }
    }
  }
  .isshow-bg {
    background: rgba(0, 0, 0, 0.2);
  }
  .empty {
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    .img {
      width: 130px;
      height: 114px;
      display: block;
      margin: 0 auto;
    }
    .p {
      margin: 0 auto;
      margin-top: 15px;
      text-align: center;
      width: 170px;
      font-size: 14px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
  }
}
.nomore {
  opacity: 0.7;
  height: 160px;
  width: 100%;
  text-align: center;
  color: #cccccc;
  font-size: 12px;
  .no-text {
    display: inline-block;
    padding: 20px 0;
    color: #999999;
  }
}
</style>